<template>
	<view class="orderList">
		<view class="menulist">
			<view class="item_class">
				<view class="pay items" @click="getAllOrder " :class="{'active': num == 'all' }">
					可接单
				</view>
				<view class="pay items" @click="showItem( 3 ) " :class="{'active': num ==3 }">
					待支付
				</view>
				<view class="waitserve items" @click="showItem( 4 ) " :class="{'active': num ==4 }">
					待服务
				</view>
				<view class="waitpay items" @click="showItem( 5 ) " :class="{'active': num ==5 }">
					服务中
				</view>
				<view class="waitpay items" @click="showItem( 6 ) " :class="{'active': num ==6 }">
					待结算
				</view>
				<view class="done items" @click="showItem( 7 ) " :class="{'active': num == 7 }">
					已完成
				</view>
				<view class="done items" @click="showItem( 8 ) " :class="{'active': num == 8 }">
					用户取消
				</view>
			</view>
		</view>
		
		
		<!-- 可接订单 -->
		<view class="canget" v-if=" num == 'all' ">
			<view class="order_item" v-for="(order, index) in orderList" :key="index" >
				<view class="item">
					<view class="top">
						<view class="user_info">
							<view class="avatar">
								<image src="../../../static/icon/avatar.png" mode=""></image>
							</view>
							<view class="user_name">
								{{ order.username }}
							</view>
						</view>
						<view class="far" style="color: #007AFF;">
							服务面积:   {{ parseInt(order.acreage) != null ? parseInt(order.acreage) : 0 }}㎡
						</view>
					</view>
					<!-- 服务内容 -->
					<!-- <view class="content">
						<view class="content_item" style="color: #007AFF;">
							#{{ order.name }}#
						</view>
					</view> -->
					<!-- info -->
					<view class="address">
						<view class="stitle" style="color: #007AFF;">服务项目:</view>
						<view class="scontent">
							{{ order.name }} 
						</view>
					</view>
					<view class="address">
						<view class="stitle" style="color: #007AFF;">服务地址:</view>
						<view class="scontent">
							{{ order.nativenative }} {{ order.address }}
						</view>
					</view>
					
					<view class="address">
						<view class="stitle" style="color: #007AFF;">预约时间:</view>
						<view class="scontent">
							{{ order.servicetime }} 
						</view>
					</view>
					
					<view class="address">
						<view style="color: #007AFF;" class="stitle">服务备注:</view> <view class="scontent" v-if="order.remark"> {{ order.remark }} </view> 
						<button v-else class="music" type="info" style="font-size: 30rpx;" @click="musicPlay(order)">播放备注音频</button>
					</view>
					<!-- baojia -->
					<view class="sub_btn">
						<button type="primary" @click="sendPrice(order)" v-if="order.master != token">报价</button>
						<button  v-else disabled>已报价</button>
					</view>
				</view>
			</view>
			
			<view class="btnbox" style="padding: 20rpx 30rpx;">
				<button  @click="allShua">刷新订单</button>
			</view>
		</view>
		<!-- 已接订单 -->
		<view class="myorder" v-else>
			<view class="order_item" v-for="(iten, index) in myorder" :key="index">
				<view class="item">
					<view class="top">
						<view class="user_info">
							<view class="avatar">
								<image src="../../../static/icon/avatar.png" mode=""></image>
							</view>
							<view class="user_name">
								{{ iten.username }}
							</view>
						</view>
						<view class="far" style="color: #007AFF;">
							{{ iten.status | getStatus }}
						</view>
					</view>
					<!-- 服务内容 -->
					<!-- <view class="content">
						<view class="content_item">
							#{{ iten.name }}#
						</view>
					</view> -->
					<!-- info -->
					<view class="address">
						<view style="color: #007AFF;" class="stitle">服务项目:</view> <view class="scontent"> {{ iten.name }} </view>
					</view>
					<view class="address">
						<view style="color: #007AFF;" class="stitle">服务地址:</view> <view class="scontent">{{ iten.nativenative }} {{ iten.address }}</view>
					</view>
					<view class="address">
						<view style="color: #007AFF;" class="stitle">我的报价:</view> <view class="scontent">{{ iten.orderprice }} </view>
					</view>
					<view class="address">
						<view style="color: #007AFF;" class="stitle">预付金额:</view> <view class="scontent">{{ iten.imprest }} </view>
					</view>
					<view class="address" v-if="iten.premium">
						<view class="stitle" style="color: #007AFF;">额外支出:</view>
						<view class="scontent">
							{{ iten.premium }} 
						</view>
					</view>
					<view class="address" v-if="iten.servicetime">
						<view class="stitle" style="color: #007AFF;">预约时间:</view>
						<view class="scontent">
							{{ iten.servicetime }} 
						</view>
					</view>
					<view class="address" v-if="iten.phone  && iten.status > 3 && iten.status < 7 ">
						<view class="stitle" style="color: #007AFF;">联系用户:</view>
						<view class="scontent">
							<button size="mini" style="font-size: 26rpx;" @click="callPhone(iten.phone)">拨打电话</button>
						</view>
					</view>
					<view class="address">
						<view style="color: #007AFF;" class="stitle">服务备注:</view> <view class="scontent" v-if="iten.remark"> {{ iten.remark }} </view> 
						<button v-else class="music" type="info" style="font-size: 30rpx;" @click="musicPlay(iten.voice)">播放备注录音</button>
					</view>
					<view class="btn_box">
						<button type="primary" v-if="iten.status == 4"  @click="startWork(iten.orderid)">开始服务</button>
						<button type="primary" v-if="iten.status == 5"  @click="donetWork(iten.orderid)">完成服务</button>
						
					</view>
					
				</view>
			</view>
			
			<view class="reflash" >
				<button type="primary" @click="ShuaXin">刷新订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	var player = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				myorder: [],
				orderList: [],
				allOrder: [],
				num: "all",
				showbaojia: true,
			}
		},
		props: {
			dialogData: Object,
			dialog: Object,
			formData: Object
		},
		computed: {
			token() {
				return this.$store.state.token;
			},
			navbar() {
				return this.$store.state.navbar
			},
			city() {
				return this.$store.state.userInfo.city
			},
		},
		mounted() {
			// console.log(1);
			this.getOrder(this.num)
			// this.timeReflash()
			this.getLocaltion()
			// this.setTime()
		},
		filters:{
			getStatus:(val) => {
				if(val == 1) {
					return "待接单"
				} else if(val == 2) {
					return  "已报价"
				} else if(val == 3) {
					return  "等待用户支付定金"
				} else if(val == 4) {
					return  "用户已支付,待服务"
				} else if(val == 5) {
					return  "师傅服务中"
				} else if(val == 6) {
					return  "需结算尾款"
				} else if(val == 7)  {
					return "订单完成"
				} else {
					return "客户取消"
				}
			},
		},
		watch: {
			num(newVal, oldVal) {
				this.getOrder( newVal )
			},
		},
		methods: {
			// 师傅完成服务
			donetWork( orderid ) {
				let self = this
				uni.showModal({
					cancelColor:"#007eff",
					title: "完成工作",
					content: "服务是否有额外支付?",
					cancelText: "否",
					confirmText: "是",
					confirmColor: "#df0609",
					async success( res ) {
						if(res.cancel) {
							let ret = await self.$Request("POST",'/order/orderfinish', { orderid, token: self.token, premium: "0"})
							if(ret.data.code == 202) {
								uni.showToast({
									title: "服务完成",
									icon: "success"
								})
								self.num = 6
								self.getOrder( self.num )
							}
						} else {
							console.log("有");
							self.dialogData.show = true
							self.$emit("doneOrderid", orderid)
						}
					},
				})
			},
			// 师傅开始工作
			async startWork( orderid ) {
				let self = this
				uni.showModal({
					cancelColor:"#007eff",
					title: "开始工作",
					content: "确定已到位开始服务?",
					cancelText: "否",
					confirmText: "是",
					confirmColor: "#df0609",
					async success( res ) {
						if(res.cancel) {
							uni.showToast({
								title: "无操作",
								icon: "loading"
							})
						} else {
							let ret = await self.$Request("POST", "/order/orderworking", { token: self.token, orderid })
							//console.log(ret);
							if( ret.data.code == 202 ) {
								uni.showToast({
									title: "开始服务",
									icon: "success"
								})
								self.num = 5
								self.getOrder( self.num )
							}
						}
					},
				})
			},
			// 过滤订单
			showItem( num ) {
				this.num = num
				console.log(num);
			},
			// 播放录音
			musicPlay( musicSrc ) {
				player.src = musicSrc
				player.play()
			},
			// 点击刷新
			ShuaXin() {
				// console.log(this.num);
				this.getOrder( this.num )
				uni.showToast({
					title:"刷新成功",
					icon: "success"
				})
			},
			// 获取自己报价的订单
			async getOrder( num ) {
				let self = this
				if(this.token) {
					let res = await this.$Request("POST", "/order/shifu_orderlist",{ master: this.token, token: this.token , type: num ? num : this.num})
					this.myorder = res.data.data
				}
				// console.log(this.myorder);
			},
			// 定时刷新订单
			timeReflash() {
				setInterval(() => {
					this.getOrder( this.num )
				}, 1000 * 10)
			},
			
			// 定时获取订单
			setTime() {
				setInterval(() => {
					this.getAllOrder()
				}, 1000 * 10)
			},
			
			// 可接点单刷新
			allShua() {
				this.getAllOrder()
				uni.showToast({
					title: "刷新成功",
					icon: "success"
				})
			},
			// 获取所有订单
			async getAllOrder( type ) {
				this.num = "all"
				// console.log(this.city);
				let res = await this.$Request("POST","/order/orderlist",{ token: this.token, city: this.city })
				// console.log(res)
				this.orderList = res.data.data
			},
			// 获取位置
			getLocaltion() {
				//console.log(1);
				let self = this
				uni.getLocation({
				    type: 'gcj02',
					geocode: true,
				    success: function (res) {
				        //console.log(res);
						self.width = res.latitude
						self.height = res.longitude
						self.getCity()
				    }
				});
			},
			// 获取城市
			getCity() {
				let self = this
				if(this.width && this.height) {
					uni.request({
						url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${self.width},${self.height}&key=${self.$apikey}`,
						data: {},
						success:( city ) => {
							// console.log(city);
							self.$store.commit("getUserInfo", city.data.result.ad_info)
							self.getAllOrder()
						}
					})
				}
			},
			// 报价
			sendPrice( item ) {
				this.$emit("orderChange", item)
			},
			// 拨打电话
			callPhone( phone ) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		color: #007AFF;
		border-bottom: 1px solid #007AFF;
	}
	.reflash {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.orderList {
		width: 100%;
		box-sizing: border-box;
		.menulist {
			width: 100%;
			overflow-x: scroll;
			&::-webkit-scrollbar {
				display: none;
			}
			.item_class  {
				width: 1200rpx;
				box-sizing: border-box;
				padding: 0rpx 10rpx;
				display: flex;
				
				overflow: scroll;
				font-size: 30rpx;
				.items {
					width: 150rpx;
					box-sizing: border-box;
					padding: 10rpx 0;
					text-align: center;
					cursor: pointer;
					height: 80rpx;
					line-height:80rpx;
				}
			}
		}
		.canget {
			.order_item {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				.item {
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					border: 1px solid #f2f2f2;
					border-radius: 30rpx;
					box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
					.top {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #f2f2f2;
						.user_info {
							display: flex;
							height: 100rpx;
							align-items: center;
							
							.avatar {
								width: 80rpx;
								height: 80rpx;
								overflow: hidden;
								border-radius: 50%;
								background-color: #fff;
								border: 1px solid #f2f2f2;
								image {
									width: 80rpx;
									height: 80rpx;
								}
							}
							.user_name {
								margin-left: 20rpx;
							} 
						}
						.far {
							color: #666;
						}
					}
					.content {
						width: 100%;
						box-sizing: border-box;
						padding: 30rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						overflow: hidden;
						.content_item {
							color: #007AFF;
							margin: 10rpx;
						}
					}
					.address {
						width: 100%;
						margin: 20rpx 0;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						.stitle {
							margin-right: 20rpx;
							width: 200rpx;
						}
						.scontent {
							flex: 1;
							color: #C0C0C0;
							font-size: 30rpx;
						}
						.music {
							flex:1;
							box-sizing: border-box;
							text-align: center;
							cursor: pointer;border: 1px solid #f2f2f2;
							
						}
					}
					.sub_btn {
						width: 100%;
					}
				}
			}
		}
		.myorder {
			.order_item {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				.item {
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					border: 1px solid #f2f2f2;
					border-radius: 30rpx;
					box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
					.top {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #f2f2f2;
						.user_info {
							display: flex;
							height: 100rpx;
							align-items: center;
							
							.avatar {
								width: 80rpx;
								height: 80rpx;
								overflow: hidden;
								border-radius: 50%;
								background-color: #fff;
								border: 1px solid #f2f2f2;
								image {
									width: 80rpx;
									height: 80rpx;
								}
							}
							.user_name {
								margin-left: 20rpx;
							} 
						}
						.far {
							color: #666;
						}
					}
					.content {
						width: 100%;
						box-sizing: border-box;
						padding: 30rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						overflow: hidden;
						.content_item {
							color: #007AFF;
							margin: 10rpx;
						}
					}
					.btn_box {
						width: 100%;
						padding: 20rpx 30rpx;
						box-sizing: border-box;
					}
					.address {
						width: 100%;
						margin: 20rpx 0;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						.stitle {
							margin-right: 20rpx;
							width: 200rpx;
						}
						.scontent {
							flex: 1;
							color: #C0C0C0;
							font-size: 30rpx;
						}
						.music {
							flex:1;
							box-sizing: border-box;
							text-align: center;
							cursor: pointer;border: 1px solid #f2f2f2;
							
						}
					}
					.sub_btn {
						width: 100%;
					}
				}
			}
		}
	}
	
</style>
